<template>
    <div>
        <p id="hand">{{ msg }}</p>
        <button @click="change">VUE3更新</button>
    </div>
</template>
<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    // beforeCreate 和 created 的内容直接放在 setup 中
    console.log("正在设计大炮手臂");
    console.log("创建好了大炮手臂，正在冷却");

    // 替代 data
    const msg = ref("普通手臂");

    // 替代 methods
    function change() {
      if (msg.value === '单发大炮手臂') {
        msg.value = '三连发大炮手臂';
      } else {
        msg.value = '单发大炮手臂';
      }
    }

    // --- 生命周期钩子 ---
    onBeforeMount(() => {
      console.log("挂载之前，卸载自己的普通手臂");
    });

    onMounted(() => {
      console.log("挂载完成，已经升级为大炮手臂");
      msg.value = "单发大炮手臂";
    });

    onBeforeUpdate(() => {
      console.log("正在变换形态....");
    });

    onUpdated(() => {
      console.log("已经变换完成了形态，变成了" + msg.value);
    });

    onBeforeUnmount(() => {
      console.log("警告：侦测到高强度能量，正在准备卸载...");
    });

    onUnmounted(() => {
      console.log("大炮手臂已卸载，恢复为普通手臂。");
    });

    // 必须返回，模板才能访问
    return {
      msg,
      change
    };
  }
}
</script>